<template>
  <div class="report">
    <Header />
    <div class="Breadcrumbs">
      <!-- <Breadcrumb /> -->
      <el-button size="mini" class="pubBtn3" style="margin-right:20px;" type="button">
        <router-link :to='{ path: "/litigation" }'>返回</router-link>
      </el-button>
      <el-breadcrumb separator="-">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
          <router-link :to='{ path: "/litigation" }'>诉讼管理</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item><span class="no-redirect">诉讼详情</span> </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="report_box">
      <el-main>
        <!-- https://v.qq.com/x/cover/lcpwn26degwm7t3/v0027ih0qti.html -->
        <div v-if="data" class="content">
          <p v-html="data"></p>
        </div>
        <p v-else>暂无数据</p>
      </el-main>
    </div>
    <Service />
  </div>
</template>

<script>
import Header from "@/components/Header"
import Breadcrumb from '@/components/Breadcrumb'
import { IitigationDetail } from "@/api/user"
import Service from "@/components/Service";

export default {
  components: {
    Header,
    Breadcrumb,
    Service
  },
  data() {
    return {
      data: "",
    }
  },
  async mounted() {
    try {
      const res = await IitigationDetail({ cid: this.$route.query.id });
      this.data = res.html
    } catch (e) {
      this.$message.error(e.message);
    }

  },
  methods: {
  }
}
</script>

<style scoped lang="less">
.Breadcrumbs {
  background-color: #f4f5f7;
  width: 100%;
  margin-top: 100px;
  padding-left: 330px;
  margin-left: 0 !important;
}

.report_box {
  width: 895px;
  margin: 20px 330px;
  // border:1px solid rgba(231,234,240,1);
}

/deep/ .content p {
  line-height: 30px;
}
</style>
